<template>
  <div ref="chart" class="chart-container">

  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'


const chart = ref(null)


const initChart = () => {
  const myChart = echarts.init(chart.value)
  myChart.setOption({
    // 添加 legend 组件
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['第一周','第二周', '第三周', '第四周', '第五周', '第六周', '第七周']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '订单',
      type: 'line',
      stack: 'Total',
      data: [3210, 3322, 3021,3334, 3930, 3350, 3250]
    },
    {
      name: '销售额',
      type: 'line',
      stack: 'Total',
      data: [1210, 1322, 1021, 1334, 940, 2305, 2150]
    },
    {
      name: '注册人数',
      type: 'line',
      stack: 'Total',
      data: [2120, 1822, 1291, 2334, 2950, 3350, 3510]
    },
    {
      name: '管理员人数',
      type: 'line',
      stack: 'Total',
      data: [1150, 2322, 2201, 3154, 1950, 3350, 4510]
    }
  ]
  })
}

onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>    